﻿@page "/detail/{Id:long}"
@using Microsoft.AspNetCore.Components
@using SPA.Data

<div class="layui-container">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md8 content detail">
      <div class="fly-panel detail-box">
        <h1>@(ThreadModel.Title)</h1>
        <div class="fly-detail-info">
          <span class="layui-badge layui-bg-red">精帖</span>
          <span class="fly-list-nums"> 
            <a href="#comment"><i class="iconfont" title="回答">&#xe60c;</i> @(ThreadModel.Comment)</a>
            <i class="iconfont" title="人气">&#xe60b;</i> @(ThreadModel.View)
          </span>

        </div>
        <div class="detail-about">
          <a class="fly-avatar" href="#">
            <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
          </a>
          <div class="fly-detail-user">
            <a href="#" class="fly-link">
              <cite>@(ThreadModel.Author)</cite>
              <i class="layui-badge fly-badge-vip">VIP</i>
            </a>
            <span>@(ThreadModel.AddTime.ToString("yyyy-MM-dd HH:mm"))</span>
          </div>
        </div>
        <div class="detail-body photos">
          @(ThreadModel.Content)
        </div>
      </div>

      <div class="fly-panel detail-box" id="flyReply">
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
          <legend>回帖</legend>
        </fieldset>

        <ul class="jieda" id="jieda">
          
          @foreach (var comment in Comments)
          {
            <li data-id="@(comment.Id)" class="jieda-daan">
              <div class="detail-about detail-about-reply">
                <a class="fly-avatar" href="#">
                  <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt=" ">
                </a>
                <div class="fly-detail-user">
                  <a href="" class="fly-link">
                    <cite>@(comment.Author)</cite>
                    <i class="layui-badge fly-badge-vip">VIP</i>
                  </a>
                </div>
                <div class="detail-hits">
                  <span>@(comment.AddTime.ToString("yyyy-MM-dd HH:mm"))</span>
                </div>
              </div>
              <div class="detail-body jieda-body photos">
                @(comment.Content)
              </div>
            </li>
          }
        </ul>
        
        <div class="layui-form layui-form-pane">
           <form @onsubmit="Submit">
             <div class="layui-form-item layui-form-text">
              
              <div class="layui-input-block">
                <input type="text" name="author" @bind="Author" placeholder="请输入昵称" required class="layui-input"/>
              </div>
            </div>

            <div class="layui-form-item layui-form-text">
              
              <div class="layui-input-block">
                <textarea @bind="Content" id="L_content" name="content" required placeholder="请输入内容"  class="layui-textarea fly-editor" style="height: 150px;"></textarea>
              </div>
            </div>

            <div class="layui-form-item">
              <input type="hidden" name="jid" value="123">
              <button class="layui-btn" type="submit">
                  @if (IsAdding)
                  {
                    <i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
                    @:回复中
                  }
                  else
                  {
                    @:提交回复
                  }
              </button>
            </div>
</form>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      

      <div class="fly-panel">
        <div class="fly-panel-title">
          这里可作为广告区域
        </div>
        <div class="fly-panel-main">
          <a href="http://layim.layui.com/?from=fly" target="_blank" class="fly-zanzhu" time-limit="2017.09.25-2099.01.01" style="background-color: #5FB878;">LayIM 3.0 - layui 旗舰之作</a>
        </div>
      </div>

      <div class="fly-panel" style="padding: 20px 0; text-align: center;">
        <img src="../../res/images/weixin.jpg" style="max-width: 100%;" alt="layui">
        <p style="position: relative; color: #666;">微信扫码关注 layui 公众号</p>
      </div>

    </div>
  </div>
</div>

@code {
  [Parameter]
  public long Id { get; set; }
  
  public string Author { get; set; }
  public string Content { get; set; }
  
  public bool IsAdding { get; set; }
  
  public Thread ThreadModel { get; set; }
  public List<Comment> Comments { get; set; }
  
  protected override async Task OnInitializedAsync()
  {
    using (var db = new DbClient())
    {
      var getTask = db.Queryable<Thread>().FirstAsync(it=>it.Id == Id);
      var incTask = db.Updateable<Thread>()
        .SetColumns(it => new Thread
        {
          View = it.View + 1
        }).Where(it => it.Id == Id).ExecuteCommandAsync();

      var commentsTask = db.Queryable<Comment>().Where(it => it.ThreadId == Id).OrderBy("id DESC").Take(50).ToListAsync();
      
      ThreadModel = await getTask;
      var effortRow = await incTask;
      Comments = (await commentsTask);
    }
  }

  async Task Submit()
  {
    IsAdding = true;
    var comment = new Comment()
    {
      Author = Author,
      Content = Content,
      AddTime = DateTime.Now,
      ThreadId = Id
    };
    using (var db = new DbClient())
    {
      await db.Insertable<Comment>(comment).ExecuteCommandAsync();

      await db.Updateable<Thread>().SetColumns(it => new Thread()
      {
        Comment = it.Comment + 1
      })
        .Where(it => it.Id == Id).ExecuteCommandAsync();
    }
    Comments.Add(comment);
    Author = "";
    Content = "";
    IsAdding = false;
  }

}
